<template>
	<view class="categoryContainer">
		<view class="header">
			<view class="search">
				<image class="icon" src="../../static/icon/icon.png" mode=""></image>
				<input class="ipt" type="text" placeholder="请输入搜索关键字" placeholder-style="color: #aaa;">
			</view>
		</view>
		
		<view class="main">
			<view class="leftView">
				<view class="leftItem" 
					:class="{active: currentIndex === index}" 
					@click="currentIndex = index"
					v-for="(category, index) in categoryDataList" 
					:key="category.classifyId">
						{{category.classifyName}}
				</view>
			</view>
			<view class="rightView">
				<scroll-view scroll-y="true" enable-flex class="mainScroll">
					<view class="mainHeader">
						<image class="mainImg" :src="currentCategory.banner[0].image" mode=""></image>
					</view>
					
					<view class="mainList">
						<view class="mainItem" v-for="(sub) in currentCategory.second" :key="sub.classifyId">
							<view class="goodsTitle">{{sub.classifyName}}</view>
								<view class="goodsList">
									<view class="goodsItem" v-for="(c3) in sub.third" :key="c3.classifyId">
										<image class="goodsImg" :src="c3.image" mode=""></image>
										<view class="goodsName">{{c3.classifyName}}</view>
									</view>
								</view>
							</view>
						</view>
						
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	export default {
		name: 'Index',
		data() {
			return {
				currentIndex: 0
			}
		},
		mounted(){
			this.getCategoryList();
		},
		methods: {
			getCategoryList(){
				this.$store.dispatch('category/getCategoryList')
			}
		},
		computed: {
			...mapState('category', ['categoryDataList']),
			currentCategory(){
				return this.categoryDataList[this.currentIndex] || []
			}
		}
	}
</script>

<style lang="stylus">
	.categoryContainer
		height: 100%
		.header
			display: flex
			width: 100%
			height: 80upx
			border-bottom: 2upx solid #F6EBEA
			box-sizing: border-box
			.search
				// position: fixed
				width: 90%
				margin: 10upx auto
				display: flex
				align-items: center
				border: 2upx solid #aaa
				border-radius: 40upx
				box-sizing: border-box
				padding: 0 20upx
				background-color: #f5f5f5
				.icon
					width: 30upx
					height: 30upx
				.ipt
					width: 90%
					height: 30upx
					margin-left: 10upx
					font-size: 28upx
		.main
			display: flex
			.leftView
				width: 250upx
				// position: fixed
				.leftItem
					height: 90upx
					font-size: 28upx
					font-weight: bold
					text-align: center
					line-height: 90upx
					margin: 20upx auto
					&.active
						width: 90%
						height: 60upx
						border-radius: 10upx
						color: #D44D44
						background-color: #F6EBEA
						text-align: center
						line-height: 60upx
			.rightView
				width: calc(100vw - 150upx)
				// height: 400upx
				border-left: 2upx solid #F6EBEA
				.mainScroll
					.mainHeader
						width: 100%
						height: 280upx
						border-bottom: 2upx solid #F6EBEA
						display: flex
						justify-content: space-around
						align-items: center
						.mainImg
							height: 200upx
							width: 90%
							border-radius: 20upx
					.mainList
						.goodsTitle
							font-size: 35upx
							font-weight: bold
							height: 50upx
							line-height: 50upx
							margin: 20upx
							box-sizing: border-box
						.goodsList
							display: flex
							flex-wrap: wrap
							.goodsItem
								display: flex
								flex-direction: column
								align-items: center
								.goodsImg
									width: 170upx
									height: 170upx
								.goodsName
									font-size: 26upx
</style>
